<script setup lang="ts">
import BGpage from './component/BGpage.vue';
import Pane from './component/Pane.vue';
import Table from './component/Table.vue';

</script>

<template>
<div class="main">
  <BGpage>
    <div class="title"><span>爱仪</span></div>
    <div class="context">
      <div class="row1">
          <Pane style="width: 100%;height: 45vh;"></Pane>
          <Pane style="width: 100%;height: 45vh;"></Pane>
          <Pane style="width: 100%;height: 45vh;"></Pane>
      </div>
      <div class="row2">
          <Pane style="width: 65vw;height: 45vh;"></Pane>
          <Table style="width: 35vw;height: 45vh;"></Table>
      </div>
    </div>
  </BGpage>
</div>  
</template>

<style scoped>
.row1{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  
}
.row2{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  
}
.main{
  height: 100vh;
  width: 100vw;
}
.title{
  background-image: url(../images/title_bg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 10%;
  color: whitesmoke;
  text-align: center;
}
.title>span{
  font-size: 2.5vw;

}
.context{
  overflow: hidden;
  overflow-y: hidden;
  height: 90%;
}
</style>
